<template>
  <div class="detail">
    <scroll ref="scroll"
            class="detail-scroll">
      <!-- 对歌曲的简单介绍 -->
      <detail-base-info :baseInfo='baseInfo'
                        @allPlay='PlayMusic()' />
      <!-- 歌曲详情导航 -->
      <detail-bar :list='list'
                  @detailBarClick='detailBarClick' />
      <!-- 歌曲列表 -->
      <music-item :musiclist='musiclist'
                  v-show="isShow=='music'"
                  @musicItemClick='PlayMusic' />
      <!-- 评论 -->
      <recommends :recommends='recommends'
                  :id='id'
                  v-show="isShow=='recommend'" />
      <!-- 收藏 -->
      <music-list-live v-show="isShow=='sub'"
                       :subs='subs' />
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailBar from './childComps/DetailBar'
import MusicItem from './childComps/MusicItem'
import Recommends from './childComps/Recommends'
import MusicListLive from './childComps/MusicListLive'

// 网络请求
import { _getMusicListDetail, BaseInfo, _getSongsDetail, SongDetail, _getRecommends, _getSub } from 'network/detail'
import { indexMixin } from 'mixin/indexMixin'
export default {
  name: 'MusicListDetail',
  components: {
    Scroll,
    DetailBaseInfo,
    DetailBar,
    MusicItem,
    Recommends,
    MusicListLive
  },
  data () {
    return {
      id: '',
      // 歌单详情信息
      musicListDetail: null,
      // 歌曲最基本信息
      baseInfo: {},
      // 歌单歌曲
      musiclist: [],
      // DetailBar所需列表
      list: [],
      isShow: 'music',
      // 评论
      recommends: null,
      limit: 20,
      // 收藏
      subs: null
    }
  },
  mixins: [indexMixin],
  created () {
    // 当前活动路由参数中的id,也就是每个歌单对应的id
    this.id = this.$route.params.id
    // 根据歌单id,获取歌单所含的歌曲
    _getMusicListDetail(this.id).then(res => {
      this.musicListDetail = res.data
      this.baseInfo = new BaseInfo(this.musicListDetail.playlist)
      const str = "评论(" + this.musicListDetail.playlist.commentCount + ")"
      this.list = ["歌曲列表", str, "收藏者"]
      for (const i of this.musicListDetail.playlist.trackIds) {
        // 根据歌曲的id获取 歌曲详情
        _getSongsDetail(i.id).then(res => {
          const song = new SongDetail(res.data.songs)
          this.musiclist.push(song)
        })
      }
    })
    // 获取歌曲的评论
    _getRecommends(this.id, this.limit).then(res => {
      this.recommends = res.data.comments
    })
    // 获取歌曲的收藏
    _getSub(this.id, 30).then(res => {
      this.subs = res.data.subscribers
    })
  },
  methods: {
    // 根据导航栏切换内容
    detailBarClick (str) {
      this.isShow = str
    }
  }
}
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 35px 35px 0px 35px;
  color: #000;
  overflow: hidden;
}
.detail-scroll {
  height: 100%;
}
</style>
